import { useEffect } from "react"
import * as THREE from 'three'

/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-19 21:26:26
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender (width, height) {

    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new  THREE.PerspectiveCamera(45, width/height, 1, 3000);
    camera.position.set(200, 200, 200)
    camera.lookAt(0, 0, 0);
    // 创建webgl渲染器
    const renderer = new THREE.WebGLRenderer();
    // 设置渲染器窗口大小
    renderer.setSize(width, height);
    document.getElementById("container")?.appendChild(renderer.domElement);

    // 创建几何体
    const geometry = new THREE.BoxGeometry(60, 60, 60);
    // 创建基础材质
    const material = new THREE.MeshBasicMaterial({
      color: 0x00ff00, //设置材质颜色
      transparent:true,//开启透明
      opacity:0.5,//设置透明度
    });
    // 创建一个网格将几何体和材质组合在一起
    const mesh  = new THREE.Mesh(geometry, material);
    // 将组合好的几何体加入到场景中
    scene.add(mesh);
 

    const axesHelper = new THREE.AxesHelper(40);
    scene.add(axesHelper)
  

    
    function animate() {
      requestAnimationFrame(animate)
      // mesh.rotation.x += 0.01;
      // 渲染场景
      renderer.render(scene, camera);
    }

    animate();
    return renderer
}
export default function Axes() { 
  useEffect(() => {
    if(!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}